import { graphql } from 'gatsby';

import Callout from '../../components/Callout';
import ComponentApi from '../../components/ComponentApi';
import ReactPlayground from '../../components/ReactPlayground';

import Collapse from '../../examples/Collapse';
import Fade from '../../examples/Fade';

# Transitions

Bootstrap includes a few general use CSS transitions that can be applied
to a number of components. React Bootstrap, bundles them up into a few composable
`<Transition>` components from [react-transition-group][1], a commonly used animation wrapper for React.

Encapsulating animations into components has the added benefit of making them  more broadly useful,
as well as portable for using in other libraries.  All React-bootstrap components that can be animated, support pluggable
`<Transition>` components.

## Collapse

Add a collapse toggle animation to an element or component.

<Callout title="Smooth animations">
  If you're noticing choppy animations, and the component that's being
  collapsed has non-zero margin or padding, try wrapping the contents of
  your <code>{'<Collapse>'}</code> inside a node with no margin or
  padding, like the <code>{'<div>'}</code> in the example below. This will
  allow the height to be computed properly, so the animation can proceed
  smoothly.
</Callout>

<ReactPlayground codeText={Collapse} />

## Fade

Add a fade animation to a child element or component.

<ReactPlayground codeText={Fade} />

## API

<ComponentApi metadata={props.data.Collapse} />
<ComponentApi metadata={props.data.Fade} />

export const query = graphql`
  query TransitionQuery {
    Fade: componentMetadata(displayName: { eq: "Fade" }) {
      ...ComponentApi_metadata
    }
    Collapse: componentMetadata(displayName: { eq: "Collapse" }) {
      ...ComponentApi_metadata
    }
  }
`;

[1]: https://github.com/reactjs/react-transition-group
